<template>
    <div class="container w-75">
      <h3 class="text-center">学生基本信息</h3><br>
      <div class="flex flex-wrap gap-4">
        <el-card style="width: 480px" @click="updateInfo('student_name','姓名')" shadow="never">姓名：{{ student.student_name }}</el-card>
        <el-card style="width: 480px" @click="updateInfo('student_sex','性别')" shadow="never">性别：{{ student.student_sex }}</el-card>
        <el-card style="width: 480px" @click="updateInfo('college','学院')" shadow="never">学院：{{ student.college }}</el-card>
        <el-card style="width: 480px" @click="updateInfo('major','专业')" shadow="never">专业：{{ student.major}}</el-card>
        <el-card style="width: 480px" @click="updateInfo('interest','兴趣爱好')" shadow="never">兴趣爱好：{{ student.interest }}</el-card>
        <el-card style="width: 480px" @click="updateInfo('search_exper','科研经历')" shadow="never">科研经历：{{ student.search_exper }}</el-card>
      </div>
      </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { reactive} from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'

//获取学生的ID
let route=useRoute()
let student_id=route.query.student_id

//给后端发送请求获取学生的信息
async function getStuInfo(){
  if(student_id){
       let result=await axios({
        method:'get',
        url:"http://localhost:8080/getStuById",
        params:{
          student_id:student_id
        }
      })
      return result.data
}
}
let student=reactive(await getStuInfo())
//发送请求修改个人信息
async function sendupdateInfo(item,value){
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/updateStuInfo",
    params:{
      student_id:student_id,
      item:item,
      value:value
    }
  })
  return result.data
}

//修改个人信息
function updateInfo(updateItem,itemName){
  console.log(updateItem)
  ElMessageBox.prompt(itemName+'修改为：', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
  })
    .then(async({ value }) => {
      console.log(value)
      if(sendupdateInfo(updateItem,value)){
        student[updateItem]=value
        ElMessage({
        type: 'success',
        message:"修改成功",
      })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
    })
}

</script>

<style scoped>


</style>